
<%@ page language="java" contentType="text/html; charset=UTF-8"
	session="false" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div class="row-fluid" style="padding-bottom: 50px; max-height: 2000px">
	<div class="span11 span11div">
		<div class="controls">
			<label class="titlehomepage"> 40 NĂM ĐAM MÊ CÀ PHÊ, CHÚNG TÔI
				HÂN HẠNH ĐƯỢC PHỤC VỤ BẠN TẠI VIỆT NAM </label> <label class="titlehomepage"
				style="font-size: 14px; font-weight: none; color: black; padding: 0px 0px 20px 0px">
				Chúng tôi đã luôn tin rằng doanh nghiệp có thể và nên có tác động
				tích cực đến cộng đồng phục vụ. </label>
			<div class="row-fluid">
				<c:forEach items="${listTopNews}" var="listNews" varStatus="count">
					<div class="span4" style="margin-left: 8px">
						<div class="item">
							<div class="viewport">
								<a href="./detailnews?newsID=${listNews.id}"> <c:if
										test="${count.count == 1}">
										<span class="green-background">${listNews.name}</span>
									</c:if> <c:if test="${count.count == 2}">
										<span class="orange-background">${listNews.name}</span>
									</c:if> <c:if test="${count.count == 3}">
										<span class="purple-background">${listNews.name}</span>
									</c:if> <img src="./resources/news-images/${listNews.image}">
								</a>
							</div>
						</div>
						<div class="controls-row">
							<div class="controls" style="width: 50px; float: left">
								<div class="img-circle">
									<c:if test="${count.count == 1}">
										<img id='1' src="resources/images/greencircle.png">
									</c:if>
									<c:if test="${count.count == 2}">
										<img id='2' src="resources/images/orangecircle.png">
									</c:if>
									<c:if test="${count.count == 3}">
										<img id='3' src="resources/images/purplecircle.png">
									</c:if>
								</div>

							</div>

							<c:if test="${count.count == 1}">
								<a href="./detailnews?newsID=${listNews.id}"
									style="font-weight: bold; color: #5EC4B6; font-size: 16px; margin-top: 12px; float: left; max-width: 210px; height: 30px; margin-left: 5px">
									${listNews.name} </a>
							</c:if>
							<c:if test="${count.count == 2}">
								<a href="./detailnews?newsID=${listNews.id}"
									style="font-weight: bold; color: #f58345; font-size: 16px; float: left; max-width: 210px; margin-top: 12px; height: 30px; margin-left: 5px">
									${listNews.name}</a>
							</c:if>
							<c:if test="${count.count == 3}">
								<a href="./detailnews?newsID=${listNews.id}"
									style="font-weight: bold; color: #6f599c; font-size: 16px; margin-top: 12px; float: left; max-width: 210px; height: 30px; margin-left: 5px">
									${listNews.name}</a>
							</c:if>
						</div>
					</div>
				</c:forEach>

			</div>
		</div>
	</div>
</div>